<template>
  <div class="summary-box">
    <div class="tab-box">
      <div v-for="(item, index) in tabs" :key="index" class="tab-item" :class="{ active: tabIndex === item.value }"
        @click="tabIndex = item.value">
        <span>{{ item.label }}</span>
      </div>
    </div>
    <div class="content-box">
      <industrialInvestment v-if="tabIndex === 0" />
      <developConstruct v-else />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import industrialInvestment from "./components/industrialInvestment.vue";
import developConstruct from "./components/developConstruct.vue";

let tabIndex = ref(0);
let tabs = [
  {
    label: "产业投资类",
    value: 0
  },
  {
    label: "开发建设类",
    value: 1
  }
];
</script>

<style lang="scss" scoped>
.summary-box {
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;

  .tab-box {
    display: flex;
    flex-wrap: wrap;

    .tab-item {
      padding: 10px 20px;
      border: 1px solid #ccc;
      color: #ccc;
      border-radius: 5px;
      cursor: pointer;

      &:not(:first-child) {
        margin-left: 20px;
      }

      &.active {
        border: 1px solid var(--el-color-primary);
        color: var(--el-color-primary);
        background: #fff8f6;
      }
    }
  }

  .content-box {
    flex: 1;
    height: 0;
    padding-top: 20px;
    box-sizing: border-box;
  }
}
</style>
